<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .menue{
          height: 48px;
          display: block;
          width: 800px;
          margin: 40px auto;
      }
      .menue ul{
          list-style: none;
          padding: 0;
          margin: 0;
          overflow: hidden;
          background: #666666;
          box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
      }
      .menue ul li{
          float: left;
          text-align: center;
      }
      .menue ul li a{
          position: relative;
          display: block;
          width: 111px;
          height: 48px;
          line-height: 48px;
          font-size: 14px;
          text-decoration: none;
          cursor: pointer;
          font-weight: bold;
          color: #FFFFFF;
      }
      .menue ul li a span{
          position: absolute;
          display: inline-block;
          width: 111px;
          left: 0;
      }
      .menue ul li a span.origin{
          top:0px;
        }
      .menue ul li a span.over{
          top: -48px;
      }


      .menue ul li a span.over {

          height: 44px;
          width: 111px;
          background: #ffb442;
          border-bottom: 4px solid #d94b01;

      }

    </style>
</head>
<body>
  <div class="menue" id="menue">
      <ul>
          <li><a href="javascript:;">首页</a></li>
          <li><a href="javascript:;">企业文化</a></li>
          <li><a href="javascript:;">产品展示</a></li>
          <li><a href="javascript:;">新闻中心</a></li>
          <li><a href="javascript:;">阳光服务</a></li>
          <li><a href="javascript:;">加盟代理</a></li>
          <li><a href="javascript:;">在线咨询</a></li>
      </ul>
  </div>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $("#menue li a").wrapInner('<span class="origin"></span>');

    $("#menue li a").each(function () {
        $('<span class="over">'+$(this).text()+'</span>').appendTo(this);
    });

    $("#menue li a").hover(function () {
        $(".origin",this).stop().animate({'top':'48px'},300);
        $(".over",this).stop().animate({'top':'0px'},300);
    },function () {
        $(".origin",this).stop().animate({'top':'0px'},300);
        $(".over",this).stop().animate({'top':'-48px'},300);
    })
























  </script>
</body>
</html>